<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__log-login">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.creatorName" placeholder="用户名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.status" placeholder="状态" clearable>
            <el-option label="失败" :value="0"></el-option>
            <el-option label="成功" :value="1"></el-option>
            <el-option label="账号已锁定" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle('/sys/user',dataForm)">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
        <el-table-column prop="creatorName" label="用户名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作类型" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.operation === 0 ? '登录' : '退出' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" sortable="custom" header-align="center" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">失败</el-tag>
            <el-tag v-else-if="scope.row.status === 1" size="small" type="success">成功</el-tag>
            <el-tag v-else size="small" type="warning">账号已锁定</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="操作IP" header-align="center" align="center"></el-table-column>
        <el-table-column prop="userAgent" label="User-Agent" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
      </el-table>
	    <c-pagination @page-change="pageChange" :total="total" :page="page" :limit="limit"></c-pagination>
    </div>
  </el-card>
</template>

<script setup>
import {reactive, ref, unref} from "vue";
import CPagination from "../../../components/c-pagination.vue";
import http from "../../../utils/request.js";
import {exportHandle, message, messageBox} from "../../../utils/commonScript.js";


const url = '/sys/log/login'

const addOrUpdateVisible = ref(false)
const page = ref(1)
const limit = ref(10)
const order = ref('') // 排序，asc／desc
const orderField = ref('') // 排序，字段
const dataForm = reactive({
	creatorName: '',
	status: ''
})
const dataListLoading = ref(false) // 数据列表，loading状态
const dataList = ref([]) // 数据列表
const total = ref(0) // 总条数

const query = () => {
	dataListLoading.value = true
	http.get(`${url}/page`,
		{
			params: {
				order: unref(order),
				orderField: unref(orderField),
				page:  page.value,
				limit: limit.value,
				...dataForm
			}
		}
	).then(({data: res}) => {
		dataListLoading.value = false
		if (res.code !== 0) {
			dataList.value = []
			total.value = 0
			return message.error(res.msg)
		}
		dataList.value = res.data.list
		total.value = res.data.total
	}).catch(() => {
		dataListLoading.value = false
	})
}
query()
// 查询
const getDataList = () => {
	page.value = 1
	limit.value = 10
	query()
}
// 分页
const pageChange = (p, l) => {
	page.value = p
	limit.value = l
	query()
}

// 排序
const dataListSortChangeHandle = (data) => {
	if (!data.order || !data.prop) {
		order.value = ''
		orderField.value = ''
		return false
	}
	order.value = data.order.replace(/ending$/, '')
	orderField.value = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
	query()
}
</script>
